<template>
  <div>
    <n-list hoverable clickable>
    <n-list-item v-for="(item,index) in dataList" :key="index" @click="goDetail(item.id)">
      <n-thing :title="item.name+'('+index+')'" content-style="margin-top: 10px;">
    <n-p> {{ item.content }}</n-p>
      
      </n-thing>
      <n-space justify="end">
      <n-text depth="3">
        2023年3月15日
      </n-text>
     </n-space>
    </n-list-item>
  </n-list>
  <n-space justify="center" style="padding: 15px;">
    <n-spin v-if="loading" size="medium" />
    <n-button v-else type="success" round ghost  @click="getData">
      加载更多
    </n-button>
  </n-space>

</div>
</template>

<script  setup lang="ts">
import {getCurrentInstance,reactive,ref} from "vue"
import { useLoadingBar } from 'naive-ui'
const loadingBar = useLoadingBar()
//数据
const dataList=reactive([
    {
        id:1,
        name:'张苹果博客',
        content:'博客地址：https://www.zhangpingguo.com/'
    } , {
        id:1,
        name:'标题',
        content:'博客地址：https://www.zhangpingguo.com/'
    }, {
        id:1,
        name:'标题',
        content:'博客地址：https://www.zhangpingguo.com/'
    }, {
        id:1,
        name:'标题',
        content:'博客地址：https://www.zhangpingguo.com/'
    }, {
        id:1,
        name:'标题',
        content:'博客地址：https://www.zhangpingguo.com/'
    }, {
        id:1,
        name:'标题',
        content:'博客地址：https://www.zhangpingguo.com/'
    }, {
        id:1,
        name:'标题',
        content:'博客地址：https://www.zhangpingguo.com/'
    }
]);

//获取数据
let number=1;
let loading=ref(false);
const getData=()=>{
    loadingBar.start()
    loading.value=true;
    number++;
 const timer1=setTimeout(()=>{
    dataList.push(
        {
          id:number,
          name:'标题',
          content:'博客地址：https://www.zhangpingguo.com/'

        },{
          id:number,
          name:'标题',
          content:'博客地址：https://www.zhangpingguo.com/'

        })
    loading.value=false;
    loadingBar.finish()
  //报错 loadingBar.error()
    window.clearTimeout(timer1)
  },1000)

}





//发布
const instance =getCurrentInstance();
const goDetail=(val:any)=>{
    instance?.proxy?.$Bus.emit('vae-goPath',{name:'detail',id:val})

}

</script>

<style >

</style>
